<template>
  <div class="main">
      <div class="header content">
        <i class="menu"></i><span>首页</span><i class="setting"></i><i class="info"></i>
      </div>
      <div></div>
      <swiper :options="swiperOption" ref="mySwiper" class="Swiper">
        <!-- slides -->
        <swiper-slide><img src="https:\/\/pic2.zhimg.com\/v2-a57bdadc2f3d66bf9c919ade3cf617bd.jpg" width="100%"><div class="zhezhao"></div><p>二十六岁，我变成了一个「中年人」</p></swiper-slide>
        <swiper-slide><img src="https:\/\/pic2.zhimg.com\/v2-f7d62aee4a3e6bd0bbf22877dd4fae9d.jpg" width="100%"><div class="zhezhao"></div><p>- 怎么欣赏动辄几亿元的名画？\r\n- 先看它亲爹再看它干爹</p></swiper-slide>
        <swiper-slide><img src="https:\/\/pic3.zhimg.com\/v2-835e7c935bab0277f092d49293717c8e.jpg" width="100%"><div class="zhezhao"></div><p>GAI 在《歌手》里唱这首歌，基本可以确定稳了</p></swiper-slide>
        <swiper-slide><img src="https:\/\/pic1.zhimg.com\/v2-0eba6087f755a5f21886fd065cf58d00.jpg" width="100%"><div class="zhezhao"></div><p>博士生频出事，读博真的成了致命「赌博」？</p></swiper-slide>
        <swiper-slide><img src="https:\/\/pic3.zhimg.com\/v2-6296abf4bb6fae4975f34346974c5f92.jpg" width="100%"><div class="zhezhao"></div><p>医护人员信命吗？</p></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="today_news">
        <h3>今日热闻</h3>
      </div>
      <div class="news_lists">
        <section>
          <a href="">
            <span class="title">GAI 在《歌手》里唱这首歌，基本可以确定稳了</span>
            <img src="https:\/\/pic3.zhimg.com\/v2-964130004d299c0896478bc931e311d6.jpg" alt="" width="82">
          </a>
        </section>
        <section>
          <a href="">
            <span class="title">GAI 在《歌手》里唱这首歌，基本可以确定稳了</span>
            <img src="https:\/\/pic4.zhimg.com\/v2-f546de877c81fa5b30d21b6d9aab6547.jpg" alt="" width="82">
          </a>
        </section>
        <section>
          <a href="">
            <span class="title">GAI 在《歌手》里唱这首歌，基本可以确定稳了</span>
            <img src="https:\/\/pic2.zhimg.com\/v2-6e3b110e27a9a31541f9005f15e4594d.jpg" alt="" width="82">
          </a>
        </section>
        <section>
          <a href="">
            <span class="title">GAI 在《歌手》里唱这首歌，基本可以确定稳了</span>
            <img src="https:\/\/pic2.zhimg.com\/v2-6e3b110e27a9a31541f9005f15e4594d.jpg" alt="" width="82">
          </a>
        </section>
      </div>
  </div>
</template>

<script>
export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        loop: true,
        direction: "horizontal",
        pagination: {
          el: ".swiper-pagination",
          bulletElement: "span"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    this.swiper.slideTo(0, 1, true);

    
  }
};
</script>
<style lang="stylus">

body
    margin 0
.header
    background-color #00a2ed
    height 56px
    line-height 56px
    padding 0 18px
    position fixed
    top 0;
    width 100vw
    box-sizing: border-box;
    z-index 100
    .menu,span
        float left
        color #fff
        font-size 18px
    .menu
        background-image url(../assets/menu.png)
    i
        height 20px
        width 20px
        display block
        margin-top calc(18px)
    .info,.setting
        float right 
    .info
        background-image url(../assets/remind.png)
    .setting
        background-image url(../assets/setting.png)

.swiper-wrapper {
  width: 375px;
  height: 234px;
  position relative
  .zhezhao{
    background-color:rgba(0,0,0,0.2) 
    position: absolute;
    top: 0;
    height: 100%;
    width: 200%;
  }
  img {
    margin-top: -18%;
  }
  p{
    position absolute;
    color white
    bottom 25px
    padding 0 20px ;
    font-size 20px;
    margin 0
    font-weight 500
  }
}
body{
  background-color #f3f3f3
}
.today_news{
  height 55px;
  color #787878
}
.news_lists
  section
    margin 14px 10px
    height 102px;
    padding 10px 14px;
    background-color #fff;
    border-radius 4px;
    box-sizing: border-box;
    box-shadow: 0px 2px 6px #ccc
    span 
      display block;
      float left
      width calc(100% - 102px)
      margin-right 20px
      font-size 16px
      color #070707
    img
      float  right
// .Swiper{
//   margin-top 56px
// }
</style>
<style>

body::-webkit-scrollbar {
    width: 12px;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

</style>


